<template>
	<view class="articlMsgPage">
		<!-- 开启下拉刷新和无数据显示图片 1 -->
		<z-paging ref="paginga" v-model="artcleMsgData" @query="getArtcleData" :fixed="false" :auto="false"
			:empty-view-style="{'margin-top':'-200rpx'}">

			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y">
				<uni-list>
					<uni-list-item :title="item.title"
						:note="item.source + '&nbsp&nbsp' + $tool.timeago(item.update_time) " :clickable="true"
						v-for="item in artcleMsgData" :key="item.id" @click="onClick(item)">
						<template v-slot:footer>
							<view class="uni-thumb" style="margin: 0;" v-show="item.image_url.length>1">
								<image class="slot-image" :src="'https://mcdn.chatgk.com' + item.image_url"
									mode="widthFix"></image>
							</view>
						</template>
					</uni-list-item>

				</uni-list>

				<!-- <view class="divding-line"></view> -->
			</scroll-view>
		</z-paging>

		<loading v-show="loadshow"></loading>
	</view>
</template>

<script>
	export default {
		props: {
			datanumber: {
				type: Number,
				default: null
			},
			inputValue: {
				type: String,
				default: ''
			},
			isShowData: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				loadshow: false,
				searchKey: '',
				artcleMsgData: '',
				scrollTop: 0,
				positionBox: 1, //我是文章页面的状态 如果没有数据那么就为
				isShowLoad: true,
				imageUrl: ''
			}
		},
		methods: {
			//过滤器 图片
			filterImg() {
				return "jsm.huixinshengxue.com"
			},
			getArtcleData(page = 1, pageSize = 10) {

				if (this.isShowLoad) {
					this.isShowLoad = false
					// uni.showLoading({
					// 	mask: true
					// })
				}

				let data = {
					search: this.searchKey,
					searchType: "news",
					page,
					pageSize
				}
				this.loadshow = true
				this.$request.searchType(data).then(res => {
					this.loadshow = false
					uni.hideLoading()
					// this.artcleMsgData = res.data[0].data
					if (this.artcleMsgData.length > 0) {
						this.positionBox = 1
						this.$emit("changeBoxIsShow", "articleMsg", 1)
					} else {
						this.positionBox = 2
						this.$emit("changeBoxIsShow", "articleMsg", 0)
					}
					if (this.datanumber == 3) {
						this.artcleMsgData = this.artcleMsgData.slice(0, 3)
					}
					if (this.artcleMsgData.length == 0) {
						this.$emit("isLookMet", "articleMassage")
					}
					this.$refs.paginga.complete(res.data[0].data);
				}).catch(err => {
					uni.hideLoading()
					uni.$emit('z-paging-error-emit')
				})
			},
			// 点击列表进行一个跳转到对应页面
			onClick(data) {
				uni.navigateTo({
					url: "/subpackages/subpackage1/pages/searchcollege/collegeDetails/news-details?data=" +
						encodeURIComponent(JSON
							.stringify(data))
				})
			}
		},
		watch: {
			inputValue: {
				handler() {
					this.searchKey = this.inputValue
					this.isShowLoad = true
					this.getArtcleData()
				},
				deep: true,
				immediate: true
			}

		},
		mounted() {
			this.searchKey = this.inputValue
			// this.getArtcleData()
		},

	}
</script>

<style lang="scss" scoped>
	.articlMsgPage {
		height: 100%;
	}

	.slot-image {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		margin-right: 10px;
		width: 30px;
		height: 30px;
	}

	.scroll-Y {
		height: 100%;

	}

	.divding-line {
		width: 100vh;
		height: 40rpx;
	}

	//定位图片盒子
	.positionBox {
		width: 300rpx;
		height: 300rpx;
		position: absolute;
		display: flex;
		flex-direction: column;
		top: calc(50% - 150rpx - 128rpx);
		left: calc(50% - 120rpx);

		image {
			width: 100%;
			height: 80%;
		}

		text {


			width: 100%;
			text-align: center;
		}
	}

	.uni-list-item {
		height: 168rpx;


		// align-content: space-between;
		.uni-list-item__content-title {

			font-size: 28rpx;
			font-weight: 600;
			color: #333333;


		}

		.uni-list-item__content-note {
			font-size: 24rpx;
			font-weight: 400;
			color: #999999;
		}


	}

	// .uni-list-item__container{
	// 	height: 120px;
	// 	width: 100%;
	// }
	.uni-thumb {


		.slot-image {
			width: 184rpx;
			height: 120rpx;
			border-radius: 10rpx;

		}
	}
</style>